<template>
  <div style="padding: 20px">
    <el-row>
      <el-col :span="24">
        <el-row :gutter="20" style="margin-bottom: 10px">
          <el-col :span="8">
            <div class="flex ">
              <el-select class="mr-2" size="small" v-model="queryParam.areaId" placeholder="请选择区域" clearable>
                <template v-for="(item,index) in areaList">
                  <el-option :value="item.id" :label="item.name" :key="index"></el-option>
                </template>

              </el-select>
              <el-select size="small" v-model="queryParam.departmentId" placeholder="请选择区域" clearable>
                <template v-for="(item,index) in departmentList">
                  <el-option :value="item.id" :label="item.name" :key="index"></el-option>
                </template>
              </el-select>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="flex">
              <el-date-picker
                clearable
                style="flex: 1"
                size="small"
                v-model="dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="flex ">
              <el-select class="mr-2" size="small" v-model="queryParam.status" clearable>
                <el-option value="" label="请选择"></el-option>
                <el-option value="1" label="待受理"></el-option>
                <el-option value="2" label="已受理"></el-option>
                <el-option value="3" label="已完成"></el-option>
                <el-option value="4" label="延期答复"></el-option>
                <el-option value="5" label="已取消"></el-option>
                <el-option value="6" label="已确认"></el-option>
              </el-select>
              <el-button style="margin-left: 10px" size="small" type="primary" @click="handlerSearch">查询</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-table
              :data="tableData"
              style="width: 100%"
            >
              <el-table-column
                prop="id"
                label="申请编号"
              >
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                prop="title"
                label="受理部门"
              >
                <template #default="{row}">
                  {{ getDePart(row) }}
                </template>
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                prop="title"
                label="真实姓名"
              >
                <template #default="{row}">
                  {{ row.realName }}
                </template>
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                prop="title"
                label="电话"
              >
                <template #default="{row}">
                  {{ row.phone }}
                </template>
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                prop="title"
                label="身份证号码"
              >
                <template #default="{row}">
                  {{ row.cardNumber }}
                </template>
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                prop="title"
                label="传真"
              >
                <template #default="{row}">
                  {{ row.postCode }}
                </template>
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                prop="title"
                label="通讯地址"
              >
                <template #default="{row}">
                  {{ row.callAddress }}
                </template>
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                prop="title"
                label="工作地址"
              >
                <template #default="{row}">
                  {{ row.workAddress }}
                </template>
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                prop="title"
                label="内容描述"
              >
                <template #default="{row}">
                  {{ row.description }}
                </template>
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                prop="title"
                label="身份文件"
              >
                <template #default="{row}">
                  <el-image :src="row.cardFile"></el-image>
                </template>
              </el-table-column>
              <el-table-column
                width="320"
                prop="title"
                label="语音文件"
              >
                <template #default="{row}">
                  <audio :src="row.audioFile" controls></audio>
                </template>
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                prop="createdTime"
                label="申请时间"
              >
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                prop="updatedTime"
                label="办理时间"
              >
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                prop="remark"
                label="操作备注"
              >
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                prop="status"
                label="处理状态"
              >
                <template #default="{row}">
                  <div v-if="row.status==1">
                    <el-button type="primary" size="mini">待受理</el-button>
                  </div>
                  <div v-if="row.status==2">
                    <el-button type="warning" size="mini">已受理</el-button>
                  </div>
                  <div v-if="row.status==3">
                    <el-button type="success" size="mini">已完成</el-button>
                  </div>
                  <div v-if="row.status==4">
                    <el-button type="danger" size="mini">已延期</el-button>
                  </div>
                  <div v-if="row.status==5">
                    <el-button type="danger" size="mini">已取消</el-button>
                  </div>
                  <div v-if="row.status==6">
                    <el-button type="danger" size="mini">已确认</el-button>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                width="210"
                fixed="right"
                prop="title"
                label="操作"
              >
                <template #default="{row}">
                  <div>
                    <el-button size="mini" type="success" @click="()=>{
                    currentItem=row
                    dialogVisible=true
                  }"
                    >处理
                    </el-button>
                    <el-button size="mini" type="success" @click="handlerDaiban(row)"
                    >代办
                    </el-button>
                    <el-button size="mini" type="success" @click="handlerChaKan(row)"
                    >查看
                    </el-button>
                  </div>

                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="24" class="mt-2 flex justify-center">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryParam.pageNum"
              :page-sizes="[5,10,20]"
              :page-size="queryParam.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <!-- 操作弹窗-->
    <el-dialog
      title="操作"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <div>
        <el-row>
          <el-col :span="24" style="margin-bottom: 10px">
            <div style="display: flex;align-items: center">
              <span style="flex: 0 0 60px">状态:</span>
              <el-select style="flex: 1" size="small" v-model="actionParams.status" clearable>
                <el-option value="" label="请选择"></el-option>
                <el-option value="2" label="已受理"></el-option>
                <el-option value="3" label="已完成"></el-option>
                <el-option value="4" label="延期答复"></el-option>
                <el-option value="5" label="已取消"></el-option>
                <el-option value="5" label="已确认"></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="24" style="margin-bottom: 10px">
            <div style="display: flex;align-items: center">
              <span style="flex: 0 0 60px;">确认文件:</span>
              <el-upload
                class="upload-demo"
                :limit="1"
                :on-remove="()=>{
                            actionParams.confirmList=[]
                          }"
                action="http://127.0.0.1:9526/api/user/upload"
                :on-success="handlerFileUploadConfirm"
                :file-list="actionParams.confirmList"
              >
                <el-button size="mini" type="primary">点击上传</el-button>
              </el-upload>
            </div>
          </el-col>
          <el-col :span="24">
            <div style="display: flex;align-items: center">
              <span style="flex: 0 0 60px">备注:</span>
              <el-input v-model="actionParams.remark" size="small"></el-input>
            </div>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="handlerConfirm">确 定</el-button>
  </span>
    </el-dialog>
    <!--代办弹窗-->
    <el-dialog
      title="操作"
      :visible.sync="dialogVisibleDaiBan"
      width="50%"
    >
      <div>
        <el-row>
          <el-col :span="24">
            <div>
              <div class="flex items-center">
                <h2>请填写您的个人信息</h2>
                <div class="ml-5">
                  <el-checkbox v-model="form.isFaRen"/>
                  <span class="ml-1 text-sm text-[red]">(若您代法人/组织机构申请 请选择)</span></div>
              </div>
            </div>
            <div class="mt-2">
              <el-form :model="form" :inline="true" label-width="110px" ref="ruleForm">
                <el-row :gutter="20">
                  <!--姓名-->
                  <el-col :span="8" class="">
                    <el-form-item prop="realName" :rules="[
                        {
                          required:true,
                          message:`请填写姓名`,
                          trigger:'blur'
                        }
                    ]" label="姓名"
                    >
                      <el-input size="small" v-model="form.realName"></el-input>
                    </el-form-item>
                  </el-col>
                  <!--身份证-->
                  <el-col :span="8">
                    <el-form-item prop="cardNumber" label="身份证号" :rules="[
                        {
                          required:true,
                          message:`请填写身份证号`,
                          trigger:'blur'
                        }
                    ]"
                    >
                      <el-input size="small" v-model="form.cardNumber"></el-input>
                    </el-form-item>
                  </el-col>
                  <!--电话号码-->
                  <el-col :span="8">
                    <el-form-item prop="phoneNumber" label="电话号码"
                                  :rules="[
                        {
                          required:true,
                          message:`请填写电话号码`,
                          trigger:'blur'
                        }
                    ]"
                    >
                      <el-input size="small" v-model="form.phoneNumber"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <!--邮政编码-->
                  <el-col :span="8">
                    <el-form-item prop="postCode" label="邮政编码" :rules="[
                        {
                          required:true,
                          message:`请填写邮政编码`,
                          trigger:'blur'
                        }
                    ]"
                    >
                      <el-input size="small" v-model="form.postCode"></el-input>
                    </el-form-item>
                  </el-col>
                  <!--电子邮件-->
                  <el-col :span="8">
                    <el-form-item prop="email" label="电子邮件"
                                  :rules="[
                        {
                          required:true,
                          message:`请填写电子邮件`,
                          trigger:'blur'
                        }
                    ]"
                    >
                      <el-input size="small" v-model="form.email"></el-input>
                    </el-form-item>
                  </el-col>
                  <!--传真-->
                  <el-col :span="8">
                    <el-form-item prop="fax" label="传真"
                                  :rules="[
                        {
                          required:true,
                          message:`请填写传真`,
                          trigger:'blur'
                        }
                    ]"
                    >
                      <el-input size="small" v-model="form.fax"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item prop="callAddress" label="通讯地址"
                                  :rules="[
                        {
                          required:true,
                          message:`请填写通讯地址`,
                          trigger:'blur'
                        }
                    ]"
                    >
                      <el-input size="small" v-model="form.callAddress"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item prop="workAddress" label="工作单位"
                                  :rules="[
                        {
                          required:true,
                          message:`请填写工作单位`,
                          trigger:'blur'
                        }
                    ]"
                    >
                      <el-input size="small" v-model="form.workAddress"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" v-if="form.isFaRen">
                    <el-form-item prop="businessNumber" label="营业执照"
                                  :rules="[
                        {
                          required:true,
                          message:`请填写营业执照`,
                          trigger:'blur'
                        }
                    ]"
                    >
                      <el-input size="small" v-model="form.businessNumber"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item prop="cardFileList" label="身份证明文件"
                                  :rules="[
                        {
                          required:true,
                          message:`请上传身份证明文件`,
                          trigger:'blur'
                        }
                    ]"
                    >
                      <el-upload
                        class="upload-demo"
                        :limit="1"
                        :on-remove="()=>{
                            this.form.cardFileList=[]
                          }"
                        action="http://127.0.0.1:9527/api/user/upload"
                        :on-success="handlerFileUpload"
                        :file-list="form.cardFileList"
                      >
                        <el-button size="small" type="primary">点击上传</el-button>
                      </el-upload>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <h1>请填写所需信息</h1>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item prop="audioList" label="音频">
                      <el-upload
                        class="upload-demo"
                        :limit="1"
                        accept=".mp3"
                        :on-remove="()=>{
                            this.form.audioList=[]
                          }"
                        action="http://127.0.0.1:9526/api/user/upload"
                        :on-success="handlerFileUploadAudio"
                        :file-list="form.audioList"
                      >
                        <el-button size="small" type="primary">点击上传</el-button>
                      </el-upload>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item prop="department" label="受理单位">
                      <el-select v-model="form.department"
                                 :rules="[
                        {
                          required:true,
                          message:`请填写受理单位`,
                          trigger:'blur'
                        }
                    ]"
                      >
                        <el-option value="1" label="政务办公室"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item prop="description" label="内容描述">
                      <el-input type="textarea" v-model="form.description"></el-input>
                    </el-form-item>
                  </el-col>

                </el-row>
              </el-form>
            </div>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleDaiBan = false">取 消</el-button>
    <el-button type="primary" @click="handlerDaiBanConfirm">确 定</el-button>
  </span>
    </el-dialog>
    <!--查看弹窗-->
    <el-dialog
      title="操作"
      :visible.sync="dialogVisibleChaKan"
      width="50%"
    >
      <div>
        <el-row>
          <el-col :span="24">
            <div>
              <div class="flex items-center">

                <div class="ml-5">
                  <el-checkbox v-model="form.isFaRen"/>
                  <span class="ml-1 text-sm text-[red]">(若您代法人/组织机构申请 请选择)</span></div>
              </div>
            </div>
            <div class="mt-2">
              <el-form :model="form" :inline="true" label-width="110px" ref="ruleForm">
                <el-row :gutter="20">
                  <!--姓名-->
                  <el-col :span="8" class="">
                    <el-form-item prop="realName" :rules="[
                        {
                          required:true,
                          message:`请填写姓名`,
                          trigger:'blur'
                        }
                    ]" label="姓名"
                    >
                      <el-input size="small" v-model="form.realName"></el-input>
                    </el-form-item>
                  </el-col>
                  <!--身份证-->
                  <el-col :span="8">
                    <el-form-item prop="cardNumber" label="身份证号" :rules="[
                        {
                          required:true,
                          message:`请填写身份证号`,
                          trigger:'blur'
                        }
                    ]"
                    >
                      <el-input size="small" v-model="form.cardNumber"></el-input>
                    </el-form-item>
                  </el-col>
                  <!--电话号码-->
                  <el-col :span="8">
                    <el-form-item prop="phoneNumber" label="电话号码"
                                  :rules="[
                        {
                          required:true,
                          message:`请填写电话号码`,
                          trigger:'blur'
                        }
                    ]"
                    >
                      <el-input size="small" v-model="form.phoneNumber"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <!--邮政编码-->
                  <el-col :span="8">
                    <el-form-item prop="postCode" label="邮政编码" :rules="[
                        {
                          required:true,
                          message:`请填写邮政编码`,
                          trigger:'blur'
                        }
                    ]"
                    >
                      <el-input size="small" v-model="form.postCode"></el-input>
                    </el-form-item>
                  </el-col>
                  <!--电子邮件-->
                  <el-col :span="8">
                    <el-form-item prop="email" label="电子邮件"
                                  :rules="[
                        {
                          required:true,
                          message:`请填写电子邮件`,
                          trigger:'blur'
                        }
                    ]"
                    >
                      <el-input size="small" v-model="form.email"></el-input>
                    </el-form-item>
                  </el-col>
                  <!--传真-->
                  <el-col :span="8">
                    <el-form-item prop="fax" label="传真"
                                  :rules="[
                        {
                          required:true,
                          message:`请填写传真`,
                          trigger:'blur'
                        }
                    ]"
                    >
                      <el-input size="small" v-model="form.fax"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item prop="callAddress" label="通讯地址"
                                  :rules="[
                        {
                          required:true,
                          message:`请填写通讯地址`,
                          trigger:'blur'
                        }
                    ]"
                    >
                      <el-input size="small" v-model="form.callAddress"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item prop="workAddress" label="工作单位"
                                  :rules="[
                        {
                          required:true,
                          message:`请填写工作单位`,
                          trigger:'blur'
                        }
                    ]"
                    >
                      <el-input size="small" v-model="form.workAddress"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" v-if="form.isFaRen">
                    <el-form-item prop="businessNumber" label="营业执照"
                                  :rules="[
                        {
                          required:true,
                          message:`请填写营业执照`,
                          trigger:'blur'
                        }
                    ]"
                    >
                      <el-input size="small" v-model="form.businessNumber"></el-input>
                    </el-form-item>
                  </el-col>
<!--                  <el-col :span="24">-->
<!--                    <el-form-item prop="cardFileList" label="身份证明文件"-->
<!--                                  :rules="[-->
<!--                        {-->
<!--                          required:true,-->
<!--                          message:`请上传身份证明文件`,-->
<!--                          trigger:'blur'-->
<!--                        }-->
<!--                    ]"-->
<!--                    >-->
<!--                      <el-upload-->
<!--                        class="upload-demo"-->
<!--                        :limit="1"-->
<!--                        :on-remove="()=>{-->
<!--                            this.form.cardFileList=[]-->
<!--                          }"-->
<!--                        action="http://127.0.0.1:9527/api/user/upload"-->
<!--                        :on-success="handlerFileUpload"-->
<!--                        :file-list="form.cardFileList"-->
<!--                      >-->
<!--                        <el-button size="small" type="primary">点击上传</el-button>-->
<!--                      </el-upload>-->
<!--                    </el-form-item>-->
<!--                  </el-col>-->
                </el-row>
                <el-row>
<!--                  <el-col :span="24">-->
<!--                    <h1>请填写所需信息</h1>-->
<!--                  </el-col>-->
<!--                  <el-col :span="24">-->
<!--                    <el-form-item prop="audioList" label="音频">-->
<!--                      <el-upload-->
<!--                        class="upload-demo"-->
<!--                        :limit="1"-->
<!--                        accept=".mp3"-->
<!--                        :on-remove="()=>{-->
<!--                            this.form.audioList=[]-->
<!--                          }"-->
<!--                        action="http://127.0.0.1:9526/api/user/upload"-->
<!--                        :on-success="handlerFileUploadAudio"-->
<!--                        :file-list="form.audioList"-->
<!--                      >-->
<!--                        <el-button size="small" type="primary">点击上传</el-button>-->
<!--                      </el-upload>-->
<!--                    </el-form-item>-->
<!--                  </el-col>-->
<!--                  <el-col :span="24">-->
<!--                    <el-form-item prop="department" label="受理单位">-->
<!--                      <el-select v-model="form.department"-->
<!--                                 :rules="[-->
<!--                        {-->
<!--                          required:true,-->
<!--                          message:`请填写受理单位`,-->
<!--                          trigger:'blur'-->
<!--                        }-->
<!--                    ]"-->
<!--                      >-->
<!--                        <el-option value="1" label="政务办公室"></el-option>-->
<!--                      </el-select>-->
<!--                    </el-form-item>-->
<!--                  </el-col>-->
                  <el-col :span="24">
                    <el-form-item prop="description" label="内容描述">
                      <el-input type="textarea" v-model="form.description"></el-input>
                    </el-form-item>
                  </el-col>

                </el-row>
              </el-form>
            </div>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleChaKan = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisibleChaKan=false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<script>
import api from '@/api/users'
import moment from 'moment'
import { mapState } from 'vuex'

export default {
  name: 'search',
  data() {
    return {
      dialogVisibleChaKan:false,
      dialogVisibleDaiBan: false,
      currentItem: null,
      dialogVisible: false,
      departmentList: [],
      areaList: [],
      total: 0,
      tableData: [],
      dateRange: '',
      activeName: 'search',
      queryParam: {
        status: '',
        startTime: '',
        endTime: '',
        pageNum: 1,
        pageSize: 5,
        areaId: '',
        departmentId: ''
      },
      actionParams: {
        id: '',
        remark: '',
        operatorUserId: this.$store.state.id,
        status: '',
        confirmList: []
      },
      form: {
        businessNumber: '',
        cardFileList: [],
        audioList: [],
        isFaRen: false,
        realName: '',
        cardNumber: '',
        phoneNumber: '',
        postCode: '',
        fax: '',
        callAddress: '',
        workAddress: '',
        department: '',
        description: ''

      }
    }
  },
  computed: {
    ...mapState('user', ['id']),
    getDePart() {
      return (row) => {
        let d = ''
        this.areaList.forEach(item => {
          if (item.id == row.areaId) {
            item.fdepartmentsList.forEach(_item => {
              if (_item.id == row.departmentId) {
                d = _item.name
              }
            })
          }
        })
        return d
      }
    }
  },
  watch: {
    'queryParam.areaId'() {

      this.areaList.forEach(item => {
        if (item.id === this.queryParam.areaId) {
          this.departmentList = item.fdepartmentsList
        }
      })
    },
    activeName() {
      if (this.activeName === 'search') {
        this.fetchData()
      }
    }
  },
  mounted() {
    this.fetchData()
    this.fetchAreaData()
  },
  methods: {
    // 选中代办
    handlerDaiban(row) {
      console.log('>>>>>>>>>>>>>>选中的row', row)
      this.dialogVisibleDaiBan = true
      this.form = { ...this.form, ...row }
      this.form.phoneNumber = row.phone
      this.form.isFaRen = row.isBusiness == 1 ? true : false
      this.form.department = row.departmentId.toString()
      this.form.cardFileList = [{ name: '身份证明.png', url: row.cardFile }]
      this.form.audioList = [{ name: '语音.mp3', url: row.audioFile }]
    },
    handlerChaKan(row){
      this.dialogVisibleChaKan = true
      this.form = { ...this.form, ...row }
      this.form.phoneNumber = row.phone
      this.form.isFaRen = row.isBusiness == 1 ? true : false
      this.form.department = row.departmentId.toString()
      this.form.cardFileList = [{ name: '身份证明.png', url: row.cardFile }]
      this.form.audioList = [{ name: '语音.mp3', url: row.audioFile }]
    },
    // 处理代办操作
    handlerDaiBanConfirm() {
      this.$refs.ruleForm.validate((isValid) => {
        if (isValid) {
          console.log('>>>>>>>>>>>待提交的数据', this.form)
          let data = {
            ...this.form,
            userId: 1,
            userName: 'xx',
            phone: this.form.phoneNumber,
            cardFile: this.form.cardFileList.map((item) => item.url).join('') || '',
            audioFile: this.form.audioList.map((item) => item.url).join('') || '',
            areaId: 1,
            departmentId: this.form.department,
            status: 1
          }
          data.isBusiness = 0
          if (this.form.isFaRen) {
            data.isBusiness = 1
            data.businessNumber = this.form.businessNumber
          }
          api.updateApply2(data).then((res) => {
            this.$notify.success({
              title: '提示',
              message: '操作成功'
            })
            this.dialogVisibleDaiBan = false
            // 重置数据
            this.form = {
              businessNumber: '',
              cardFileList: [],
              audioList: [],
              isFaRen: false,
              realName: '',
              cardNumber: '',
              phoneNumber: '',
              postCode: '',
              fax: '',
              callAddress: '',
              workAddress: '',
              department: '',
              description: ''
            }
            this.fetchData()
            console.log('>>>>>>>>>>>申请结果', res)
          })
        }
      })
    },
    // 处理确认操作
    handlerConfirm() {
      this.actionParams.id = this.currentItem.id
      this.actionParams.operatorUserId = this.$store.state.user.id
      console.log('>>>>>>>>>>>>this.actionParams', this.actionParams, this.$store)
      if (!this.actionParams.status) {
        this.$notify.error({
          title: '提示',
          message: '没有选择状态'
        })
        return
      }

      api.updateApply({
        ...this.actionParams,
        confirmFile: this.actionParams.confirmList.map(item => item.url).join('')||"s"
      }).then(() => {
        this.$notify.success({
          title: '提示',
          message: '操作成功'
        })
        // 拉取数据
        this.dialogVisible = false

        this.fetchData()
      })
    },
    handlerSearch() {
      if (this.dateRange && this.dateRange.length > 0) {
        this.queryParam.startTime = moment(this.dateRange[0]).format('YYYY-MM-DD HH:mm:SS')
        this.queryParam.endTime = moment(this.dateRange[1]).format('YYYY-MM-DD HH:mm:SS')
      }
      this.fetchData()
    },
    handlerFileUploadConfirm(response, file, fileList) {
      this.actionParams.confirmList = [
        {
          name: file.name,
          url: response.data
        }
      ]
    },
    handlerFileUploadAudio(response, file, fileList) {
      this.form.audioList = [
        {
          name: file.name,
          url: response.data
        }
      ]
    },
    // 处理文件上传
    handlerFileUpload(response, file, fileList) {
      this.form.cardFileList = [
        {
          name: file.name,
          url: response.data
        }
      ]
    },
    // 处理提交
    handlerSubmit() {
      this.$refs.ruleForm.validate((isValid) => {
        if (isValid) {
          console.log('>>>>>>>>>>>待提交的数据', this.form)
          let data = {
            ...this.form,
            userId: 1,
            userName: 'xx',
            phone: this.form.phoneNumber,
            cardFile: this.form.cardFileList.map((item) => item.url).join('') || '',
            audioFile: this.form.audioList.map((item) => item.url).join('') || '',
            areaId: 1,
            departmentId: this.form.department,
            status: 1
          }
          data.isBusiness = 0
          if (this.form.isFaRen) {
            data.isBusiness = 1
            data.businessNumber = this.form.businessNumber
          }
          api.applys(data).then((res) => {
            // 重置数据
            this.form = {
              businessNumber: '',
              cardFileList: [],
              audioList: [],
              isFaRen: false,
              realName: '',
              cardNumber: '',
              phoneNumber: '',
              postCode: '',
              fax: '',
              callAddress: '',
              workAddress: '',
              department: '',
              description: ''
            }
            this.activeName = 'search'
            this.fetchData()
            console.log('>>>>>>>>>>>申请结果', res)
          })
        }
      })
    },
    async fetchAreaData() {
      let { data } = await api.areaList()

      this.areaList = data
    },
    async fetchData() {
      let { data } = await api.applysList(this.queryParam)

      this.tableData = data.records
      this.total = data.total
    },
    handleCurrentChange(size) {
      this.queryParam.pageNum = size
      this.fetchData()
    },
    handleSizeChange(size) {
      this.queryParam.pageSize = size
      this.fetchData()
    },
    handleClick() {

    }
  }
}
</script>

<style>
.el-form--inline .el-form-item {
  width: 100%;
  display: flex;
}

.el-form--inline .el-form-item .el-form-item__content {
  flex: 1;
}
</style>
